<template>
  <div>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="show" ref="ball"></div>
    </transition>

    <h3 align="center" @click="show=true">{{title}}</h3>
    <hr>
    <span>作者：{{author}}</span>
    <div v-html="content"></div>
    <div v-html="'<p>'+wxs+'</p>'"></div>
    <div v-html="'<p>'+yiyu+'</p>'"></div>
    <comment-box :id="id"></comment-box>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

import comment from "../subcomponents/Comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      title: null,
      author: null,
      content: null,
      wxs: null,
      yiyu: null,
      show: false
    };
  },
  components: {
    "comment-box": comment
  },
  methods: {
    getNewsList() {
      let urlarr = ["/src/data/news.json", "/src/data/newslist.json"];

      this.$http.get(urlarr[parseInt(this.id) % 2]).then(res => {
        console.log(res.body);
        if (res.ok) {
          this.author = res.body.article_author;
          this.content = res.body.article_content;
          this.title = res.body.article_title;
          this.wxs = res.body.wxs;
          this.yiyu = res.body.yiyu;
          console.log(this.yiyu);
          Toast("ok");
        } else {
          this.$alert("请求失败");
        }
      });
    },
    beforeEnter(el) {
      // ...
      el.style.transform = 'translate(0, 0)';
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter(el, done) {
      // ...
      el.offsetWidth;
      const ballRect = this.$refs.ball.getBoundingClientRect()
      const badgeRect = document.getElementById("badge").getBoundingClientRect()
      const left = badgeRect.left-ballRect.left
      const top = badgeRect.top-ballRect.top
      el.style.transform = `translate(${left}px,${top}px)`;
      el.style.transition = "all 1s cubic-bezier(0.075, 0.82, 0.165, 1)";
      done();
    },
    afterEnter(el) {
      this.show = !this.show;
      // ...
    }
  },
  created() {
    console.log(this.id);
  },
  mounted: function() {
    this.getNewsList();
  }
};
</script>

<style lang="scss" scoped>
div {
  padding: 10px;
}
span {
  padding: 10px;
  font-size: 14px;
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f00;
  position: absolute;
  z-index: 1000;
}
</style>
